<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{
  rate: number
  value: number
  color: string
  showValue: boolean
}>()
const width = computed(() => `${props.rate * 100}%`)
</script>

<template>
  <div class="capsule-bar">
    <div
      class="capsule-bar__fill"
      :style="{ width, backgroundColor: color }"
    >
      <span v-if="showValue" class="capsule-bar__value">{{ value }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.capsule-bar {
  box-shadow: 0 0 3px #999;
  height: 10px;
  margin: 5px 0;
  border-radius: 5px;
  &__fill {
    height: 8px;
    margin-top: 1px;
    border-radius: 5px;
    transition: width .3s;
    position: relative;
  }
  &__value {
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateX(100%) translateY(-50%);
  }
}
</style>